<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <style>
	#d1{ /*CSS:-  JS:驼峰*/
		border-width: 1px 10px 30px;
		border-style: solid;
		border-color: #999;
	}
	#d2{ /*CSS:-  JS:驼峰*/
		border-width: 4px;
		border-style: double;
	}
	#d3{ /*CSS:-  JS:驼峰*/
		border-width: 1px;
		border-style: dotted;
	}
	#d4{ /*CSS:-  JS:驼峰*/
		border-width: 1px;
		border-style: dashed;
	}
	#d5{ /*CSS:-  JS:驼峰*/
		border-width: 4px;
		border-style: groove;
	}
	#d6{ /*CSS:-  JS:驼峰*/
		border-width: 4px;
		border-style: ridge;
	}
	#d7{ /*CSS:-  JS:驼峰*/
		border-width: 4px;
		border-style: inset;
	}
	#d8{ /*CSS:-  JS:驼峰*/
		border-width: 8px;
		border-style: outset;
	}
	#d9{ /*CSS:-  JS:驼峰*/
		border: 1px solid #ffaa00;
	}
	#d10{ 
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		border-left: 1px solid #f00;
		border-right: 1px solid #0f0;
	}
	div.trans{
		border: 10px solid transparent;
	}
	body{
		/*background-color: #afa;*/
	}
	*{
		margin: 0;
		padding: 0;
	}
	input{
		/*border: 5px solid #666;*/
		/*outline: 0;外围轮廓线*/
		/*outline: #aaf solid 50px;*/

		border: 0.5px solid #A9A9A9;
	}
	input:focus{
		outline: #A5C7FE solid 1px;
		
	}
  </style>
 </head>

 <body>
  <div id="d1">商品评论区</div><br/>
  <div id="d2">商品评论区</div><br/>
  <div id="d3">商品评论区</div><br/>
  <div id="d4">商品评论区</div><br/>
  <div id="d5">商品评论区</div><br/>
  <div id="d6">商品评论区</div><br/>
  <div id="d7">商品评论区</div><br/>
  <div id="d8">商品评论区</div><br/>
  <div id="d9">商品评论区</div><br/>
  <div id="d10">商品评论区</div><br/>

  <div class="trans">一个区块</div>
  <div class="trans">二个区块</div>
  <br/>

  <input />
  ABCDEFG
  
 </body>
</html>
